<template>
	<view class="container">
		<view class="recharge">
			<view>
				选择充值银行卡
			</view>
			<view class="choose_account">			
				<view>
					<image src="../../static/icon/yinhangka.png"></image>
				</view>			
				<view>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view>{{array[index]}}</view>
					</picker>
				</view>			
			</view>
			<view>
				<input type="number" placeholder="输入充值金额" class="amount" v-model="amount">
			</view>
		</view>
		<view>
			<button type="primary" @click="recharge">充值</button>
		</view>
	</view>
</template>

<script>
	import Global from '../../common/global.js'
	
	export default {
		data() {
			return {
				customerNumber:'',
				array:[],
				typeArray:[],
				index:0,
				amount:''
			}
		},
		methods: {
			//获得绑卡列表
			getAccountList() {
				uni.request({
					url: Global.BASE_URL + '/ewallet/queryBindAccountByCustomer',
					header:{
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						customerNumber:this.customerNumber
					},
					method:'POST',
					success:(res)=>{ //注意使用箭头函数						
						this.array = res.data.map((item)=>{
							return item.accountNumber
						});	
						
						this.typeArray = res.data.map((item)=>{
							return item.accountType
						});
					},
					fail(err) {
						uni.showToast({
							title:'查询绑卡列表接口调用失败',
							icon:'none'
						})
					}
				})	
			},
			// 选择框事件
			bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.target.value)
			    this.index = e.target.value
			},
			//充值操作
			recharge(){
				uni.showModal({
					title: '充值提示',
					content: '确认账户' + this.array[this.index] + '充值' + this.amount + '?' ,
					success: (res)=> {
						if (res.confirm) {
							
							uni.request({
								url: Global.BASE_URL + '/ewallet/recharge',
								header:{
									'content-type': 'application/x-www-form-urlencoded'
								},
								data:{
									customerNumber:this.customerNumber,
									accountNumber:this.array[this.index],
									accountType:this.typeArray[this.index],
									amount:this.amount
								},
								method:'POST',
								success:(res)=>{ //注意使用箭头函数						
									uni.showToast({
										title:'充值成功',
										duration: 1000
									})
									
									setTimeout(()=>{
										uni.switchTab({
											url:'../home/home'
										})
									},1000);
								},
								fail(err) {
									uni.showToast({
										title:'充值接口调用失败',
										icon:'none'
									})
								}
							})
							
						} 
					}
				});					
			}
		},
		onLoad() {
			//读取出客户编号
			this.customerNumber = uni.getStorageSync('customerNumber')
			//获得绑卡列表
			this.getAccountList()
		}
	}
</script>

<style>
	.container {		
		padding: 15rpx;
	}
	
	.recharge {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.choose_account {
		font-size: 40rpx;
		display: flex;
		justify-content:space-around;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.choose_account image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.amount {
		width: 600rpx;
		height: 150rpx;
		color: #333333;
		font-size: 48rpx;
		border-bottom: 1px solid #C0C0C0;
		margin-bottom: 50rpx;
	}
</style>